<template>
	<!-- 居民信息详情 -->
	<view class="popu-info">
		<view class="popu-head" :style="{height:headHeight}">
			<view class="head-left">
				<view class="left-img">
					<image v-if="info.userImage==''|| info.userImage==null" src="../../../../static/infor/ren.png"></image>
					<image v-else :src="info.userImage"></image>
				</view>
				<view class="left-content">
					<view class="left-item">{{ info.userPolitical_dictText }}</view>
					<view class="left-item">{{ info.userNation_dictText }}</view>
				</view>
			</view>
			<view class="head-right">
				<view class="right1">
					<view class="right1-1">{{ info.userRealname }}</view>
					<view class="right1-2">
						<image mode="widthFix" v-if="info.userSex==2" src="../../../../static/infor/nv.png"></image>
						<image mode="widthFix" v-else src="../../../../static/infor/nan.png"></image>
					</view>
				</view>
				<view class="right2">年龄：<text>28</text></view>
				<view class="right2">身份证号：<text>{{ info.userIdCard }}</text></view>
				<view class="right2">联系电话：<text>{{ info.userPhone || '暂无资料' }}</text></view>
				<view class="right2">民族：<text>{{ info.userNation_dictText }}</text></view>
				<view class="right2">学历：<text>暂无资料</text></view>
				<!-- <view class="right2">籍贯：<text>{{ info.userPhoneAdress || '暂无资料' }}</text></view> -->
				<view class="right2">家庭地址：<text>{{ info.userAdress || '暂无资料' }}</text></view>
				<view class="right2">曾用名：<text>暂无资料</text></view>
				<view class="right2">工作单位：<text>暂无资料</text></view>
				<view class="right2">政治面貌：<text>{{ info.userPolitical_dictText }}</text></view>
				<view class="right2">婚姻状况：<text>{{ info.userMarrie_dictText }}</text></view>
				<view class="right2">特长技能：<text>暂无资料</text></view>
				<view class="right2">电子邮箱：<text>暂无资料</text></view>
				<view class="right2">是否经商：<text>暂无资料</text></view>
				<view class="right2">是否有门店：<text>暂无资料</text></view>
				<view class="right2">职业类别：<text>暂无资料</text></view>
				<view class="right2">职业：<text>{{ info.userType_dictText }}</text></view>
				<view class="right2">参加工作时间：<text>暂无资料</text></view>
				<view class="right2">退休时间：<text>暂无资料</text></view>
			</view>
			<view class="head-fixed" @click="handleOpen">
				{{ text }}
				<u-icon :name="name" color="#2979ff" size="23"></u-icon>
			</view>
		</view>
		<!-- 房屋信息 -->
		<view class="population-content">
			<view class="con-head">
				<view class="head-left">房屋信息</view>
				<navigator class="head-right" url="../../House/AddHouse/AddHouse" hover-class="none"><image src="../../../../static/icon/jiapopu.png"></image></navigator>
			</view>
			<view class="con-con">
				
				<view class="con-item">
					<view class="con2-head">
						<view class="head-img"><image src="../../../../static/icon/h1.png"></image></view>
						<view class="head-text">
							<view class="text1">{{ info.userAdress }}</view>
							<view class="text2">塔沱社区</view>
						</view>
					</view>
					<view class="item-2">房主：<text>暂无</text></view>
					<view class="item-2">与房主关系：<text>{{ info.relastionBtHouseHolder_dictText }}</text></view>
					<!-- <view class="item-2">房屋成员：<text>王召</text></view> -->
				</view>
				
			</view>
		</view>
		<!-- 户籍信息 -->
		<view class="population-content">
			<view class="con-head">
				<view class="head-left">户籍信息</view>
			</view>
			<view class="con-con">
				
				<view class="con-item">
					<view class="con2-head">
						<view class="head-img"><image src="../../../../static/icon/h1.png"></image></view>
						<view class="head-text">
							<view class="text1">{{ info.userAdress }}</view>
						</view>
					</view>
					<view class="item-2">房主：<text>暂无</text></view>
					<view class="item-2">与户主关系：<text>{{ info.relationBtFamilyHolder_dictText }}</text></view>
					<!-- <view class="item-2">房屋成员：<text>王召</text></view> -->
				</view>
				
			</view>
		</view>
		<!-- 人口卡片 -->
<!-- 		<view class="population-content">
			<view class="con-head">
				<view class="head-left">人口卡片</view>
				<view class="head-right"><image src="../../../../static/icon/jiapopu.png"></image></view>
			</view>
			<view class="con-con2">
				
				<view class="con-item2" @click="handleGoPopulationCard">
					<view class="item-head">
						退役军人
						<view class="head-delete" @click="show=true">
							<image mode="heightFix" src="../../../../static/icon/shanchu.png"></image>
						</view>
					</view>
					<view class="item-content">
						<view class="con-item3">
							<view class="item3-left">入伍时间：</view>
							<view class="item3-right">2010-02-03</view>
						</view>
						<view class="con-item3">
							<view class="item3-left">退伍时间：</view>
							<view class="item3-right">2010-02-03</view>
						</view>
					</view>
				</view>
				<view class="con-item2" @click="handleGoPopulationCard">
					<view class="item-head">
						退役军人
						<view class="head-delete">
							<image mode="heightFix" src="../../../../static/icon/shanchu.png"></image>
						</view>
					</view>
					<view class="item-content">
						<view class="con-item3">
							<view class="item3-left">入伍时间：</view>
							<view class="item3-right">2010-02-03</view>
						</view>
						<view class="con-item3">
							<view class="item3-left">退伍时间：</view>
							<view class="item3-right">2010-02-03</view>
						</view>
					</view>
				</view>
				
			</view>
		</view> -->
		<!-- 人员历程 -->
<!-- 		<view class="population-content">
			<view class="con-head">
				<view class="head-left">人员历程</view>
			</view>
			<view class="timeline">
				<u-time-line>
						<u-time-line-item nodeTop="2">
							<template v-slot:node>
								<view class="u-node" style="background: #19be6b;">
									<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-title">待取件</view>
									<view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view>
									<view class="u-order-time">2019-05-08 12:12</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<template v-slot:content>
								<view>
									<view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
									<view class="u-order-time">2019-12-06 22:30</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
			</view>
		</view> -->
		<u-modal v-model="show" title="删除提示" :show-cancel-button="true" :content="content" confirm="confirm"></u-modal>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				headHeight:'295rpx',
				text:'展开',
				name:'arrow-down',
				show:false,
				content:'确定删除本卡片吗？',
				info:{}
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'../Population-add/Population-add?type=1'
			})
		},
		mounted() {
			this.info = JSON.parse(uni.getStorageSync("info"))
			console.log(this.info)
		},
		methods:{
			handleOpen() {
				if(this.headHeight == '295rpx'){
					this.headHeight = '1100rpx'
					this.text = '收起'
					this.name = 'arrow-up'
					return
				}
				this.headHeight = '295rpx'
				this.text = '展开'
				this.name = 'arrow-down'
			},
			confirm() {
				uni.showToast({
					title:'删除成功'
				})
			},
			handleGoHourseInfo() {
				uni.navigateTo({
					url:'../../House/HourseInfo/HourseInfo'
				})
			},
			handleGoPopulationCard() {
				uni.navigateTo({
					url:'../PopulationCard-edit/PopulationCard-edit'
				})
			},
			handleGoDomicileInfo() {
				uni.navigateTo({
					url:'../../Domicile/Domicile-info/Domicile-info'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		
		.u-order-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
		}
		
		.u-order-desc {
			color: rgb(150, 150, 150);
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}
		
		.u-order-time {
			color: rgb(200, 200, 200);
			font-size: 26rpx;
		}
	.popu-info{
		min-height: 100vh;
		background-color: #f5f6f7;
		padding: 20rpx;
		.popu-head{
			display: flex;
			background-color: #fff;
			width: 100%;
			border-radius: 10rpx;
			padding: 20rpx;
			overflow: hidden;
			position: relative;
			transition: height .3s;
			.head-fixed{
				position: absolute;
				bottom: 0;
				left: 50%;
				width: 100rpx;
				text-align: center;
				transform: translateX(-50rpx);
				font-size: 23rpx;
				color: #007AFF;
			}
			.head-left{
				flex: 2;
				margin-right: 20rpx;
				.left-img{
					width: 130rpx;
					height: 160rpx;
				}
				.left-content{
					.left-item{
						color: #007AFF;
						background-color: #A1DCC1;
						font-size: 23rpx;
						border-radius: 10rpx;
						margin: 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
			.head-right{
				flex: 6;
				.right1{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.right1-1{
						color: #333;
						font-size: 30rpx;
						margin-right: 20rpx;
					}
					.right1-2{
						width: 25rpx;
					}
				}
				.right2{
					color: #999;
					font-size: 27rpx;
					padding: 10rpx 0;
					text{
						display: inline-block;
						margin-left: 20rpx;
					}
				}
			}
		}
		.population-content{
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx;
			.timeline{
				padding: 20rpx;
				margin-top: 20rpx;
			}
			.con-head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.head-left{
					color: #000;
					font-size: 30rpx;
					font-weight: 600;
				}
				.head-right{
					width: 45rpx;
					height: 45rpx;
				}
			}
			.con-con{
				.con-item{
					padding: 20rpx;
					box-shadow: 0 4px 4px #eee, 0 0 4px #eee, 0 0 4px #eee;
					border-radius: 10rpx;
					margin-top: 40rpx;
					.con2-head{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 20rpx;
						.head-img{
							width: 80rpx;
							height: 100rpx;
							margin-right: 20rpx;
						}
						.head-text{
							.text1{
								color: #000;
								font-size: 28rpx;
							}
							.text2{
								color: #999;
								font-size: 23rpx;
							}
						}
					}
					.item-2{
						color: #999;
						font-size: 28rpx;
						padding: 10rpx 0;
						text{
							display: inline-block;
							margin-left: 20rpx;
						}
					}
				}
				
			}
			.con-con2{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				.con-item2{
					width: 48%;
					border-radius: 10rpx;
					box-shadow: 0 4px 4px #eee, 0 0 4px #eee, 0 0 4px #eee;
					.item-head{
						background-color: #007AFF;
						padding: 10rpx;
						text-align: center;
						color: #fff;
						font-size: 30rpx;
						font-weight: 600;
						position: relative;
						border-radius: 10rpx 10rpx 0 0;
						.head-delete{
							height: 30rpx;
							position: absolute;
							top: 10rpx;
							right: 10rpx;
						}
					}
					.item-content{
						padding: 20rpx 10rpx;
						.con-item3{
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #999;
							.item3-left{
								margin-bottom: 10rpx;
							}
							.item3-right{}
						}
					}
				}
			}
		}
	}
</style>
